<template>
  <!-- Vue3 不再强制需要一个 根标签进行包裹了！ -->
  <ul>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </ul>
  <router-view></router-view>
  <h2>{{ msg }}</h2>
  <button @click="sayHello">点我试试</button>
</template>

<script>
// Vue3 可以兼容 Vue2 的写法，但是 如果你不是使用 options 选项式 API 编程
// 那么你就使用 Composition API 组合式 API 写法，切记！不要混编！！！
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    let msg = "前端老兵"
    const sayHello = () => {
      console.log("你好，中国！");
    }
    return {
      msg,
      sayHello
    }
  }
})
</script>

<style lang="scss" scoped></style>